import html2Canvas from 'html2canvas'
import JSPDF from 'jspdf'
type Type = 'p' | 'portrait' | 'l' | 'landscape' | undefined
export const getPdf = (el:HTMLElement, title:string, type: Type = 'p') => {
  // document.querySelector('#pdfDom')
  html2Canvas(el, {
    allowTaint: true
  }).then(function (canvas) {
    const isP = type === 'p'
    const W = isP ? 552.28 : 801.89
    const H = !isP ? 552.28 : 801.89
    // 获取canvas画布的宽高
    const contentWidth = canvas.width
    const contentHeight = canvas.height
    // 一页pdf显示html页面生成的canvas高度;
    const pageHeight = contentWidth / 592.28 * 841.89
    // 未生成pdf的html页面高度
    let leftHeight = contentHeight
    // 页面偏移
    let position = 0
    // html页面生成的canvas在pdf中图片的宽高（本例为：横向a4纸[841.89,592.28]，纵向需调换尺寸）
    const imgWidth = W
    const imgHeight = W / contentWidth * contentHeight
    const pageData = canvas.toDataURL('image/jpeg', 1.0)
    // 第一个参数： l：横向  p：纵向
    // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）；
    // 第三个参数：可以是下面格式，默认为“a4”。如需自定义格式，只需将大小作为数字数组传递，如：[592.28, 841.89];
    const PDF = new JSPDF(type, 'pt', 'a4')
    // 两个高度需要区分: 一个是html页面的实际高度，和生成pdf的页面高度
    // 当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < pageHeight) {
      PDF.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight)
    } else {
      while (leftHeight > 0) {
        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight
        position -= H
        // 避免添加空白页
        if (leftHeight > 0) {
          PDF.addPage()
        }
      }
    }
    PDF.save(title + '.pdf')
  }
  )
}
